let path=require('path')
let htmlWebpackPlugin=require('html-webpack-plugin')
let miniCssExtractPlugin =require('mini-css-extract-plugin')  //抽离css
let CssMinimizerPlugin =require('css-minimizer-webpack-plugin')  //压缩css
let TerserWebpackPlugin =require('terser-webpack-plugin')         //压缩js
let workboxWebpackPlugin=require('workbox-webpack-plugin')
let imageWebpackPlugin =require('image-minimizer-webpack-plugin')  //压缩图片
let webpack=require('webpack')
let {ModuleFederationPlugin}=webpack.container
let addAssetHtmlPlugin=require('add-asset-html-webpack-plugin')
let webpackAnalyzer=require('webpack-bundle-analyzer')
module.exports={
    mode:'development',
    devtool:'inline-cheap-source-map', //(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
    entry:{
        // index:'./src/entry/index.js',
        // b:'./src/entry/b.js',
        // tss:'./src/entry/tss.ts'
        //**       多页面打包   分离入口文件 */
        index:['./src/entry/index.js','./src/entry/b.js'],
        oth:['./src/entry/tss.ts']
        //**       多页面打包   分离入口文件 */
        //-----------------抽离公共文件-----------------------
        // index:{
        //     import:'./src/entry/index.js',
        //     dependOn:'shared'
        // },
        // b:{
        //      import:'./src/entry/b.js',
        //      dependOn:'shared'
        // },
        // shared:'loadsh'
        //-----------------抽离公共文件-----------------------
    },
    output:{
        filename:'./script/[name].js',
        // publicPath:'http:27017.0.0.1',    //js的公共路径头   开发环境不用陪
        path:path.join(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:'./image/[name][ext]'  //静态资源
    },
    module:{
        rules:[
            // {
            //     test:/\.png/,          //"asset/resource"    "asset/inline"     "asset/source"   "asset"
            //     type:"asset/resource"   //将图片转成路由格式     //将图片转成base64   原格式          更具大小自动适应
            // },
            {
                test:/\.(jpe?g|png|gif)/,
                type:"asset",
                parser:{
                   dataUrlCondition:{
                       maxSize:10*1024*1024   //小于max值-》base64  大于--》url
                   }
                }    
            },
            // {
            //     test:/\.css$/,
            //     exclude:/node_modules/,
            //     use:['style-loader',{
            //         loader:'css-loader',
            //         options:{
            //             modules:true,
            //         }
            //     }]
            //         //style-loader  将css映入到html中
            // },
            {
                test:/\.(css|less)$/,               //miniCssExtractPlugin|style 二选一
                exclude:/node_modules/,
                // use:[miniCssExtractPlugin.loader,'css-loader','less-loader']
                use:['style-loader','css-loader','less-loader','postcss-loader']
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],             //编译高级语法
                        plugins:[
                            ['@babel/plugin-transform-runtime']    //处理async/await
                        ]
                    }
                }
            },
            {
                test:/\.json$/,
                exclude:/node_module/,
                use:['json-loader']
            },{
                test:/\.ts$/,
                use:['ts-loader'],
                exclude:/node_modules/
            },
            // {
            //     test:require('./src/module/change.js') ,    
            //     use:['import-loader?warpper=window']       //将模块里的this指向window
            // },
            // {
            //     test:require('./src/module/po.js'),
            //     use:['exports-loader?type=commonjs&exports=file,multiple|help.parse|parse']    //导出一个模块
            // }

        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./public/index.html'),
            title:'hello',
            inject:'body',     //js插入位置
            filename:'chanl/index.html',
            chunks:['index']   //需要引入的入口文件名key名称
        }),
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./public/oth.html'),
            filename:'chanl/oth.html',
            chunks:['oth']
        }),
        new miniCssExtractPlugin({
            filename:'css/[name].css'   //压缩后css存放文件
        }),
        new webpack.ProvidePlugin({
            $q:'lodash'                    //将模块映射成全局对象
        }),
        new ModuleFederationPlugin({
            name:"main",
            filename:"remote.js",
            remotes:{
                nav:'nav@http://localhost:8080/remote.js'
            },
            exposes:{},
            shared:{}
        }),
        new webpack.DllReferencePlugin({
            manifest:path.join(__dirname,'./dll/main.json')  //引用打包后的dll文件
        }),
        new addAssetHtmlPlugin({     //将dll打包后文件引用到html中
            filepath:path.join(__dirname,'./dll/es.js')
        }),
        new webpackAnalyzer.BundleAnalyzerPlugin({
            analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8889,
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
        }),
        new imageWebpackPlugin({
            filter: (source) => {
                if (source.byteLength >= 1024) {
                  return true;
                }
                return false;
              },
              minimizerOptions: {
                plugins: [
                    ["jpegtran", { progressive: true }],
                    ["optipng", { optimizationLevel: 1 }],
               ],
                
              },
          })
        /*
        new workboxWebpackPlugin.GenerateSW({    //离线缓存
            clientsClaim:true,
            skipWaiting:true
        })
        */
    ],
    resolve:{
        alias:{
            "@":'/src'  //配置路径别名
        },
        extensions:['.ts','.json','.js','.jsx']    //自动添加后缀顺序
    },
    /*
    externalsType:'script',
    externals:{                 //抽离不打包模块
           lodash:[
               'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.6.0/lodash.core.js',
               'lodash',
           ],
            vue:[
                'https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.common.dev.js',
                'vue'
            ]
        // vue:'vue',
        // lodash:'lodash'
    },
    // externals:['react'],
    */
    devServer:{
        hot:true,     //false 情况下更改完会自动刷新页面   
        liveReload:true,
        client:{
            overlay:false   //关闭浏览器中错误遮罩层
        }
    },
    optimization:{         //优化配置
        minimizer:[
            new CssMinimizerPlugin() ,   //开启css压缩
            // new TerserWebpackPlugin()    //开启js压缩
        ],
        // splitChunks:{
        //     cacheGroups:{
        //         common:{
        //             chunks:'all',
        //             maxSize:0,
        //             minChunks:2
        //         },
        //         vendor:{               //抽离第三方公共文件或者叫缓存第三方文件
        //             priority:1,
        //             test:/node_modules/,    //匹配的目录
        //             name:'vendors',
        //             chunks:'all',
        //             maxSize:0,
        //             minChunks:1     //引用超过几次 才抽离打包
        //         }
        //      }
        // }
        //------------------抽离公共文件
        splitChunks:{
            chunks:'all'
        },
        usedExports:true ,   //开启tree-shaking，
        sideEffects:true     //开启副作用标识
    },
    performance:{       
        hints:false,  //超出max 给出警告
        // maxAssetSize:100,
        
    }
    
}